import React, { useEffect, useState } from "react";
import { jsPlumb } from "jsplumb";
import $ from "jquery";

function App() {
  const [jsPlumbInstance, setJsPlumbInstance] = useState(null);

  useEffect(() => {
    const instance = jsPlumb.getInstance({
      // 设置默认的连接样式
      Anchors: ["RightMiddle", "LeftMiddle"],
      Endpoint: "Blank",
      Connector: ["Bezier", { curviness: 10 }],
    });

    instance.makeSource("box1", {
      anchor: "RightMiddle",
    });
    instance.makeTarget("box2", {
      anchor: "LeftMiddle",
    });
    instance.makeSource("box2", {
      anchor: "RightMiddle",
    });
    instance.makeTarget("box3", {
      anchor: "LeftMiddle",
    });
    instance.makeSource("box3", {
      anchor: "Top",
    });
    instance.makeTarget("box1", {
      anchor: "Top",
    });

    // 将 jsPlumb 实例保存到状态中
    setJsPlumbInstance(instance);
  }, []);

  useEffect(() => {
    let timer = null;
    if (jsPlumbInstance) {
      jsPlumbInstance.ready(() => {
        // 定义连接数组
        const connections = [
          ["box1", "box2"],
          ["box2", "box3"],
        ];

        let currentConnectionIndex = 0;

        // 定义连接显示和隐藏的函数
        const showConnection = (index) => {
          const currentConnection = connections[index];
          let connectionHead = jsPlumbInstance.connect({
            source: currentConnection[0],
            target: currentConnection[1],
            paintStyle: {
              stroke: "lightgray",
              strokeWidth: 2,
              gradient: {
                stops: [
                  [0, "#3fffff"],
                  [0.3, "lightgray"],
                  [1, "lightgray"],
                ],
              },
            },
          });
          let connectionTail = jsPlumbInstance.connect({
            source: currentConnection[0],
            target: currentConnection[1],
            paintStyle: {
              stroke: "lightgray",
              strokeWidth: 2,
              gradient: {
                stops: [
                  [0, "lightgray"],
                  [0.7, "lightgray"],
                  [1, "#3fffff"],
                ],
              },
            },
          });

          $(connectionHead.canvas)
            .fadeOut(0)
            .fadeIn(1500)
            .delay(1500)
            .fadeOut()
            .delay(1500)
            .fadeIn(1500)
            .delay(500)
            .fadeOut();

          $(connectionTail.canvas)
            .fadeOut(0)
            .delay(1500)
            .fadeIn(1500)
            .delay(1500)
            .fadeOut(1500);
        };

        const hideConnection = (index) => {
          const currentConnection = connections[index];

          let getCurrentConnections = jsPlumbInstance.getConnections({
            source: currentConnection[0],
            target: currentConnection[1],
          });

          getCurrentConnections.forEach((item) => {
            jsPlumbInstance.deleteConnection(item);
          });
        };

        // 定义连接循环显示的函数
        const showNextConnection = () => {
          // 显示当前连接
          showConnection(currentConnectionIndex);

          // 延迟2.5秒后隐藏当前连接并显示下一个连接
          timer = setTimeout(() => {
            hideConnection(currentConnectionIndex);
            currentConnectionIndex =
              (currentConnectionIndex + 1) % connections.length;
            showNextConnection();
          }, 7500);
        };

        showNextConnection();
      });
    }
    return () => clearTimeout(timer);
  }, [jsPlumbInstance]);

  return (
    <div>
      <div
        id="box1"
        style={{
          position: "absolute",
          left: "100px",
          top: "100px",
          width: "100px",
          height: "100px",
          backgroundColor: "red",
        }}
      ></div>
      <div
        id="box2"
        style={{
          position: "absolute",
          left: "300px",
          top: "100px",
          width: "100px",
          height: "100px",
          backgroundColor: "green",
        }}
      ></div>
      <div
        id="box3"
        style={{
          position: "absolute",
          left: "500px",
          top: "100px",
          width: "100px",
          height: "100px",
          backgroundColor: "blue",
        }}
      ></div>
    </div>
  );
}

export default App;
